<template>
  <div ref="wrapper" :class="s['l-wrapper']">
    <div :class="s['l-header']">
      <div :class="s['m-header']">
        <img :class="s['m-header__img']" src="../assets/images/index-head.png" />
      </div>
    </div>
    <div :class="s['l-content']">
      <div :class="s['m-content']">
        <div :class="s['m-content__border']">
          <div :class="s['m-content__bd']">
            <div :class="s['m-form']">
              <div :class="s['m-form__bd']">
                <van-field @focus="onFocus()" @blur="onBlur()" v-model.trim="userInfo.name" label="姓名" required />
                <van-field @focus="onFocus()" @blur="onBlur()" v-model.number.trim="userInfo.mobile" label="手机号" type="tel" required />
                <van-field @focus="onFocus()" @blur="onBlur()" v-model.trim="userInfo.company" label="公司" type="textarea" rows="1" required :autosize="{ maxHeight: 72 }" />
              </div>
              <div :class="s['m-form__btn']" @click="onClickNext">下一步</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="s['l-pencil']">
      <div :class="s['u-pencil']"></div>
    </div>
  </div>
</template>

<script>
import localstorage from 'store';
import utils from "../utils";
import axios from 'axios';

export default {
  data() {
    return {
      userInfo: {
        name: null,
        mobile: null,
        company: null
      }
    };
  },
  mounted() {
    this.$refs.wrapper.style.height = window.innerHeight + "px";
    utils.jsSdkSignatureReady(() => {
      utils.shareWeixin({
        title: "华蓝集团纪念五四运动100周年知识竞答",
        desc: "好礼多多，等你来参与！",
        link: "https://weixin.zhujia100.com/h5/dati-app/index.html",
        imgUrl: "https://weixin.zhujia100.com/h5/dati-app/"+require("src/assets/images/share.jpg")
      });
    });
  },
  methods: {
    onFocus() {
      if (utils.isIOS()) {
        window.scroll(0, 200);
      }
    },
    onBlur() {
      if (utils.isIOS()) {
        window.scroll(0, 0);
      }
    },
    onClickNext() {
      if (this.validateFrom() === true) {
        localstorage.set("userInfo", this.userInfo);
        this.$router.push("/question");
      }
    },
    validateFrom() {
      let errorMsg;
      if (!this.userInfo.name) errorMsg = "请填写您的姓名";
      else if (!this.userInfo.mobile) errorMsg = "请填写您的手机号";
      else if (
        !/^1([358][0-9]|4[579]|66|7[0135678]|9[89])\d{8}$/.test(
          this.userInfo.mobile
        )
      )
        errorMsg = "手机格式不正确";
      else if (!this.userInfo.company) errorMsg = "请填写您的公司";
      else errorMsg = "";
      if (errorMsg) {
        this.$toast.fail(errorMsg);
        return false;
      }
      return true;
    }
  }
};
</script>
<style module="s" lang="less">
@import "~less/index.less";
@headerImgHeight: 320 * 100vw / 480;
.l-wrapper {
  /**/
  position: relative;
}
.l-header {
  /*//*/
}
.l-content {
  margin: 0 20px;
  height: calc(100% - @headerImgHeight);
}
.l-pencil {
  position: absolute;
  right: 0;
  bottom: 80px;
}
.u-pencil {
  .u-pencil();
}
.m-header {
  &__img {
    width: 100vw;
    height: calc(@headerImgHeight);
  }
}
.m-content {
  .m-content();
  height: 100%;
  &__border {
    height: calc(100% - 30px);
  }
  &__bd {
    height: 100%;
  }
}
.m-form {
  height: 100%;
  &__bd {
    padding: 10px 10px 50px;
    height: calc(100% - 50px);
  }
  &__btn {
    margin: 0 10px;
    .u-main-btn();
  }
  :global {
    .van-field__control {
      background: #eee;
    }
  }
}
</style>
